<template>
    <div ref="container" class="cr-amap"></div>
</template>

<script lang="ts" setup>
    import {ref,onMounted } from "vue";
    import {GlobalVariables} from "../GlobalVariables";
    import {EventBus} from "../utils/EventBus";
    const container:any=ref(null);
    onMounted(()=>{
        GlobalVariables.map = new AMap.Map(container.value, {
            resizeEnable: true,
            center: [119.301546,26.061267],
            zoom: 12,
            mapStyle: 'amap://styles/blue',
            viewMode: '2D',  //设置地图模式
            lang:'zh_cn',  //设置地图语言类型
        });

        GlobalVariables.map .on('complete', function(){
            //自己当前位置
            const marker = new AMap.Marker({
                title: "所在位置",
                icon: new AMap.Icon({
                    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                    size: new AMap.Size(22, 28),  //图标所处区域大小
                    imageSize: new AMap.Size(22,28) //图标大小
                }),
                offset: new AMap.Pixel(-11, -28),
                position: GlobalVariables.curPosition,
            });
            marker.setAnimation('AMAP_ANIMATION_BOUNCE');
            GlobalVariables.map.add(marker);
            EventBus.bus.emit(EventBus.mapLoaded);

        });
    })
</script>

<style scoped>
   .cr-amap {
        width: 100%;
        height: 100%;
    }
</style>